<template>
  <div class="agreement-page">

    <div class="content" >
      <div class="header">
        <h1 class="title">权益保障</h1>
        <div class="update-time">更新时间：2025年8月1日</div>
      </div>

      <div class="agreement-content">
        <section class="section">
          <h2 style="text-align: center;margin-bottom: 20rpx;">消费者权益保障措施</h2>
        </section>

        <section class="section">
          <h2>一、订单透明保障​</h2>
          <p style="text-indent: 2em;">下单时清晰展示商家信息、菜品名称、价格、规格以及配送费、打包费，所有费用明细一目了然，无隐藏收费项；​</p>
          <p style="text-indent: 2em;">订单状态实时更新（商家接单、配送员取餐、配送中、送达），消费者可通过小程序查看配送进度。​</p>
        </section>

        <section class="section">
          <h2>二、食品安全保障​</h2>
          <p style="text-indent: 2em;">入驻商家需提供合规资质，平台定期核查，杜绝无资质商家入驻；</p>
          <p style="text-indent: 2em;">若收到过期、变质、异物食品，消费者可在收货后 1 小时内提交订单详情及照片凭证，平台优先协助退款，同时督促商家整改。​</p>
        </section>

        <section class="section">
          <h2>三、售后维权保障​</h2>
          <p style="text-indent: 2em;">错发、漏发菜品：消费者反馈后，平台核实无误，可协调商家补送或全额退款；​</p>
          <p style="text-indent: 2em;">延迟送达：因商家出餐慢或配送问题导致超时，消费者可申请补偿（如部分退款、全额退款等），具体以平台规则为准。​</p>
        </section>

        <section class="section">
          <h2>四、隐私保护保障​</h2>
          <p style="text-indent: 2em;">消费者个人信息（姓名、手机号、地址）仅用于订单处理，平台承诺不向第三方泄露；​</p>
          <p style="text-indent: 2em;">订单完成后，自动隐藏收货地址中的详细隐私信息，保障信息安全。​</p>
        </section>

        <section class="section">
          <h2>五、投诉处理保障​</h2>
          <p style="text-indent: 2em;">消费者可通过小程序 "客服" 入口提交投诉，平台承诺 24 小时内响应；​</p>
          <p style="text-indent: 2em;">对商家处理结果不满意的，可申请平台介入调解，确保维权有反馈。​</p>
        </section>

        <section class="section">
          <h2>六、损失兜底与追偿保障​</h2>
          <p style="text-indent: 2em;">兜底赔付责任：当出现以下情形导致消费者合法权益受损，且商家或配送方拒绝承担赔偿责任、无法联系或无力赔付时，平台将启动兜底赔付机制：​</p>
          <ul>
            <li style="text-indent: 2em;">1.食品安全问题造成消费者人身损害(如食物中毒就医)，经权威机构鉴定与订单商品直接相关的；​</li>
            <li style="text-indent: 2em;">2.商家或配送方恶意欺诈导致消费者财产损失的；​</li>
            <li style="text-indent: 2em;">3.因平台审核疏漏导致无资质商家入驻，进而造成消费者损失的。</li>
          </ul>
          <p style="text-indent: 2em;">兜底赔付范围包括订单金额、合理医疗费用（凭正规医疗票据）及其他直接财产损失，具体赔付金额以实际损失凭证为准，单笔赔付上限不超过 5000 元。消费者需在知晓损失后 48 小时内提交相关凭证（医疗记录、鉴定报告、支付凭证等），平台将在 3 个工作日内完成审核并支付赔付金。​</p>
          <p style="text-indent: 2em;">协助追偿责任：平台履行兜底赔付义务后，自动取得对责任方（商家、配送方等）的追偿权。同时，对于未触发兜底赔付但消费者需向责任方追偿的情况，平台将提供必要协助，包括但不限于出具订单证明、提供责任方主体信息、协助整理维权材料等。消费者提出协助追偿申请后，平台需在 24 小时内对接责任方核实情况，并将进展同步至消费者。​</p>
        </section>

        <section class="section">
          <p style="text-indent: 2em;text-align: end;">长沙市简凡科技有限公司</p>
          <p style="text-indent: 2em;text-align: end;">2025年8月1日</p>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Return from '@/components/Return.vue'

const capsuleTop = ref(0)

const calcCapsuleTop = () => {
  // #ifdef MP-WEIXIN
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
  capsuleTop.value = menuButtonInfo.bottom + 20
  // #endif
}

onMounted(() => {
  calcCapsuleTop()
})
</script>

<style lang="scss" scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.content {
  padding: 0 40rpx 40rpx;
}

.header {
  text-align: center;
  padding: 40rpx 0;
  background: white;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #191919;
    margin-bottom: 16rpx;
  }

  .update-time {
    font-size: 24rpx;
    color: #999;
  }
}

.agreement-content {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;

  .section {
    margin-bottom: 40rpx;
    text-align: justify;

    &:last-child {
      margin-bottom: 0;
    }

    h2 {
      font-size: 32rpx;
      font-weight: bold;
      color: #191919;
      margin-bottom: 20rpx;
    }

    p {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    ul {
      padding-left: 32rpx;

      li {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 12rpx;
        list-style: disc;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
